<!--
	#####################################################################
	
	jQTouch iCal, 1.0 alpha
	@created by 
		Bruno Alexandre, 26.03.2010
		twitter.com/balexandre
		balexandre.com
		bruno.in.dk [at] gmail.com
	
	#####################################################################
	
	This is a iCal a-like interface to serve as a calendar/diary, use
		it at your own will.
	
	How to use.
		Copy all files into you project
			/css/jqtouch-ical.css
			/js/jqtouch-ical.js
			/images/*
			/month.htm
			/events.htm
		In your index.html file
			Import CSS and JS files
				jqtouch-ical.css
				jqtouch-ical.js
			Add a div with id "ical" where you want to show the calendar
				<div id="ical"></div>
			Call getCalendar( DATE ); to load and set the calendar 
		
	######################################################################
-->
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>jQTouch iCal</title>
        <style type="text/css" media="screen">@import "http://www.jqtouch.com/preview/jqtouch/jqtouch.min.css";</style>
        <style type="text/css" media="screen">@import "http://www.jqtouch.com/preview/themes/apple/theme.min.css";</style>
        <style type="text/css" media="screen">@import "css/jqtouch-ical.css";</style>
        <script src="http://www.jqtouch.com/preview/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://www.jqtouch.com/preview/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
        <script src="js/jqtouch-ical.js" type="application/x-javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            var jQT = new $.jQTouch({
                icon: 'jqtouch-ical.png',
                addGlossToIcon: false,
                startupScreen: 'jqt_startup.png',
                statusBar: 'black',
                preloadImages: [
                    'http://www.jqtouch.com/preview/themes/apple/img/back_button.png',
                    'http://www.jqtouch.com/preview/themes/apple/img/back_button_clicked.png',
                    'http://www.jqtouch.com/preview/themes/apple/img/button_clicked.png',
                    'http://www.jqtouch.com/preview/themes/apple/img/grayButton.png',
                    'http://www.jqtouch.com/preview/themes/apple/img/whiteButton.png',
                    'http://www.jqtouch.com/preview/themes/apple/img/loading.gif'
                    ]
            });
            // Some sample Javascript functions:
            $(function(){
			
				// load calendar
				var currentTime = new Date();
				getCalendar(currentTime); 
				
			});
        </script>
        <style type="text/css" media="screen">
            body.fullscreen #home .info {
                display: none;
            }
            #about {
                padding: 100px 10px 40px;
                text-shadow: rgba(255, 255, 255, 0.3) 0px -1px 0;
                font-size: 13px;
                text-align: center;
                background: #999;
            }
            #about p {
                margin-bottom: 8px;
            }
            #about a {
                color: #fff;
                font-weight: bold;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div id="about" class="selectable">
                <p><img src="jqtouch-ical.png" /></p>
                <p><strong>jQTouch iCal</strong><br />Version 1.0 alpha<br />
                    <a href="http://www.balexandre.com">By Bruno Alexandre</a></p>
                <p><em>A simple iCal alike<br /> interface for jQTouch.</em></p>
                <p>
                    <a href="http://twitter.com/balexandre" target="_blank">@balexandre on Twitter</a>
                </p>
                <p><br /><br /><a href="#" class="grayButton goback">Close</a></p>
        </div>
        <div id="home" class="current">
            <div class="toolbar">
                <h1>jQTouch iCal</h1>
                <a class="button flip" id="infoButton" href="#about">About</a>
            </div>
			<div id="ical">
				<!-- iCall will load here -->
			</div>
        </div>
    </body>
</html>